<template>
  <div>
    <!-- 增加修改 -->
    <create-data-form ref="createDataForm" @ok="getList" />
    <!-- 上传文件 -->
    <order-product-import-excel ref="importExcel" @ok="getList" />
    <a-modal
      v-model="visible"
      :title="productTitle"
      width="70%"
      :footer="null"
      :maskClosable="false"
    >
      <a-card :bordered="false">
        <!-- 条件搜索 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="产品编号">
                  <a-input v-model="queryParam.productCode" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="产品名称">
                  <a-input v-model="queryParam.productName" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="handleQuery">
                    <a-icon type="search" />查询
                  </a-button>
                  <a-button style="margin-left: 8px" @click="resetQuery">
                    <a-icon type="redo" />重置
                  </a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 操作 -->
        <div>
          <a-button
            type="primary"
            @click="$refs.createDataForm.handleAdd(order)"
            size="small"
            :style="{ 'margin-right': '10px' }"
            v-show="this.order.status !== '2'"
          >
            <a-icon type="plus" />新增
          </a-button>
          <a-button
            type="danger"
            :disabled="multiple"
            @click="handleDelete"
            size="small"
            :style="{ 'margin-right': '10px' }"
            v-show="this.order.status !== '2'"
          >
            <a-icon type="delete" />删除
          </a-button>
          <a-button
            type="dashed"
            @click="$refs.importExcel.importExcelHandleOpen(order)"
            size="small"
            :style="{ 'margin-right': '10px' }"
            v-show="this.order.status !== '2'"
          >
            <a-icon type="import" />导入
          </a-button>
          <a-button
            type="primary"
            @click="handleExport"
            size="small"
            :style="{ 'margin-right': '10px' }"
          >
            <a-icon type="download" />导出
          </a-button>
          <a-button
            size="small"
            type="dashed"
            shape="circle"
            :loading="loading"
            :style="{ float: 'right' }"
            icon="reload"
            @click="getList"
          />
        </div>
        <!-- 数据展示 -->
        <a-table
          :loading="loading"
          :size="tableSize"
          rowKey="orderProductId"
          :columns="columns"
          :data-source="list"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :pagination="false"
          :style="{ 'margin-top': '10px' }"
          :scroll="{ x: 1350, y: 700 }"
        >
          <span slot="status" slot-scope="text, record">{{ getOrderProductStatus(record.status) }}</span>
          <span slot="deliveryTime" slot-scope="text, record">{{ parseTime(record.deliveryTime) }}</span>
          <span slot="finishTime" slot-scope="text, record">{{ parseTime(record.finishTime) }}</span>
          <span slot="updateTime" slot-scope="text, record">{{ parseTime(record.updateTime) }}</span>
          <span slot="operation" slot-scope="text, record">
            <a @click="$refs.createDataForm.handleUpdate(record)">
              <a-icon type="edit" />修改
            </a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)">
              <a-icon type="delete" />删除
            </a>
          </span>
        </a-table>

        <!-- 分页 -->
        <a-pagination
          class="ant-table-pagination"
          show-size-changer
          show-quick-jumper
          :current="queryParam.pageNum"
          :total="total"
          :page-size="queryParam.pageSize"
          :showTotal="total => `共 ${total} 条`"
          @showSizeChange="onShowSizeChange"
          @change="changeSize"
        />
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import CreateDataForm from './CreateDataForm'
import { listOrderProduct, delOrderProduct } from '@/api/erp/orderProduct'
import OrderProductImportExcel from './OrderProductImportExcel'

export default {
  name: 'ProductData',
  components: {
    OrderProductImportExcel,
    CreateDataForm
  },
  data () {
    return {
      // 非多个禁用
      multiple: true,
      loading: false,
      visible: false,
      productTitle: '',
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        productCode: undefined,
        productName: undefined,
        orderId: undefined
      },
      columns: [
        {
          title: '产品编码',
          dataIndex: 'productCode',
          width: 150,
          ellipsis: true,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '产品名称',
          dataIndex: 'productName',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '预定数量',
          dataIndex: 'productNum',
          width: 100,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '实际数量',
          dataIndex: 'actualNum',
          width: 100,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '产品单价￥',
          dataIndex: 'productPrice',
          width: 100,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '订单货期',
          dataIndex: 'deliveryTime',
          width: 150,
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'deliveryTime' }
        },
        {
          title: '完工时间',
          dataIndex: 'finishTime',
          width: 150,
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'finishTime' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '最后更新时间',
          dataIndex: 'updateTime',
          width: 150,
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'updateTime' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 150,
          scopedSlots: { customRender: 'operation' },
          align: 'center',
          fixed: 'right'
        }
      ],
      list: [],
      selectedRowKeys: [],
      selectedRows: [],
      ids: [],
      names: [],
      total: 0,
      order: {},
      orderProductStatus: []
    }
  },
  methods: {
    handleDelete (row) {
      var that = this
      const orderProductIds = row.orderProductId || this.ids
      const orderProductNames = row.productName || this.names
      this.$confirm({
        title: '确认删除所选中数据?',
        content: '当前选中编号为' + orderProductNames + '的数据',
        onOk () {
          return delOrderProduct(orderProductIds).then(() => {
            that.onSelectChange([], [])
            that.getList()
            that.$message.success(
              '删除成功',
              3
            )
          })
        },
        onCancel () { }
      })
    },
    getList () {
      this.loading = true
      listOrderProduct(this.queryParam).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    openData (orderRecord) {
      this.order = orderRecord
      this.queryParam.orderId = orderRecord.orderId
      this.productTitle = '编码:' + orderRecord.orderCode
      this.operationPermission()
      this.getList()
      this.getDicts('xzg_order_product_status').then(response => {
        this.orderProductStatus = response.data
      })
      this.visible = true
    },
    handleExport () {
      var that = this
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk () {
          that.download('erp/orderProduct/export', {
            ...that.queryParam
          }, `order_product_${new Date().getTime()}.xlsx`)
        },
        onCancel () { }
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.orderProductId)
      this.names = this.selectedRows.map(item => item.productName)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    handleQuery () {
      this.queryParam.pageNum = 1
      this.getList()
    },
    resetQuery () {
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      this.queryParam.productCode = undefined
      this.queryParam.productName = undefined
      this.getList()
    },
    operationPermission () {
      if (this.order.status === '2') {
        this.columns = this.columns.filter(item => item.title !== '操作')
      } else {
        if (this.columns.find(item => item.title === '操作')) {

        } else {
          this.columns.push({
            title: '操作',
            dataIndex: 'operation',
            width: 150,
            scopedSlots: { customRender: 'operation' },
            align: 'center',
            fixed: 'right'
          })
        }
      }
    },
    getOrderProductStatus (status) {
      for (var i = 0; i < this.orderProductStatus.length; i++) {
        if (this.orderProductStatus[i].dictValue === status) {
          return this.orderProductStatus[i].dictLabel
        }
      }
    }
  }
}
</script>
